import { getTableData } from '../../scripts/api'
// import JddSwitch from './components/JddSwitch.vue';
import JddTextArea from './components/JddTextArea.vue'
export default {
  name: 'detailInfo',
  components: {
    // JddSwitch,
    JddTextArea
  },
  data () {
    return {
      searchform: {
        inputValue: ''
      },
      isOpen: false,
      chartType: 'bar',
      url: '/detail/chart?type=bar',
      waterData: { level: 1, num: 12, r: 50 },
      cardData: [
        {
          id: '1', title: '故障紧急', count: 320, icon: 'icon-emergency', color: '#F05A28', unit: ''
        },
        { id: '2', title: '立即处理', count: 23, icon: 'icon-critical', color: '#F18010 ', unit: '' },
        { id: '3', title: '工作处理', count: 12, icon: 'icon-warning', color: '#E7A808', unit: '' },
        { id: '4', title: '通知', count: 1345, icon: 'icon-notification', color: '#2D8CF0', unit: '' }
      ],
      detailInfo: {
        deviceName: 'BJYZ2-ZX-AGG-H5855-3-C7_D7-34U-B14',
        manufacturer: '华为',
        room: 'M6',
        IP: '172.23.123.193',
        model: 'FW',
        state: '在线',
        area: 'DMZ',
        role: 'ACC'
      },
      operateList: [
        { id: '1', text: '设备日志' },
        { id: '2', text: '操作日志' },
        { id: '3', text: '性能指标' },
        { id: '4', text: '编辑' }
      ],
      eventTable: {
        table: {
          showBanner: true,
          page: {
            tPageSizeOpts: [50, 100, 150]
          }
        }
      },
      tabDataInfo: {
        appId: '3',
        appName: 'test-timothy',
        state: '运行中',
        redisModel: '集群',
        backupStrategy: '一主一备',
        createTime: '2015-09-22 21:24:08',
        allocatedMemory: '879MB',
        usedMemory: '481MB',
        memoryUsage: '54.72%',
        operationExample: '9/9',
        descrption: '白条商品推荐'
      },
      tableData: {
        showBanner: false,
        showPager: false,
        showSearch: true,
        tData: (params) => {
          Object.assign(params, this.searchform)
          return getTableData({
            params: params
          })
        },
        tColumns: [
          // {
          //   type: 'selection',
          //   width: 60,
          //   align: 'center'
          // },
          {
            title: 'ID',
            key: 'Id',
            align: 'center',
            minWidth: 100,
            sortable: 'Id',
            sortType: 'desc'
          },
          {
            title: this.$t('detail.senior.tab.group'),
            key: 'group',
            align: 'center',
            minWidth: 150,
            sortable: 'group',
            sortType: 'desc'
          },
          {
            title: this.$t('detail.senior.tab.version'),
            key: 'version',
            align: 'center',
            minWidth: 150,
            sortable: 'version',
            sortType: 'desc'
          },
          {
            title: this.$t('common.operation'),
            minWidth: 150,
            align: 'center',
            key: 'operate',
            render: (h, params) => {
              return h(
                'div',
                this.$refs.tabTable.$scopedSlots.action({ row: params.row, index: params.index })
              )
            }
          }
        ]
      }
    }
  },
  mounted () {
    // getChartData().then(res => {
    //   console.info('data', res.data)
    // })
    this.$refs.myChartsBar.reload()
  },
  methods: {
    operateClick (data) {
      this.$Message.success(JSON.stringify(data))
    },
    handleDownClick () {
      this.$Message.success(this.$t('detail.senior.tab.btnNodeDown'))
    },
    handleCapacityClick () {
      this.$Message.success(this.$t('detail.senior.tab.batchCapacity'))
    },
    handleShowDetailClick (rowObj) {
      this.$Message.success('detail:' + JSON.stringify(rowObj))
    },
    handleRedisClick (rowObj) {
      this.$Message.success('redis:' + JSON.stringify(rowObj))
    },
    handleChartClick (rowObj) {
      this.$Message.success('chart:' + JSON.stringify(rowObj))
    },
    handleHistoryClick (rowObj) {
      this.$Message.success('history:' + JSON.stringify(rowObj))
    },
    handleEditClick (rowObj) {
      this.$Message.success('edit:' + JSON.stringify(rowObj))
    },
    searchTable () {

    },
    handleChangeChartType (status) {
      // this.url = '/detail/chart?type=' + (status ? 'line' : 'bar')
      console.info('status', status)
      !status && this.$refs.myChartsBar.reload()
      status && this.$refs.myChartsLine.reload()
    }
  }

}
